<template>  
  
    <div class="title">  
      <div class="left">  
        <a v-for="(item, index) in leftArray" :key="index"  @click="turnRouter(item.url)">{{ item.name }}</a>  
      </div>  
      <div class="right"> 
		<div v-if="loginstatus">
		  <a @click="esc">安全退出</a>
	  </div>
	  <div v-else>
		  <a @click="turnRouter('/login')">登录</a>
	  </div>
        <a v-for="(item, index) in rightArray" :key="index" @click="turnRouter(item.url)"  >{{ item.name }}</a>  
        <a href="javascript:void(0)" class="cart" @mouseover="showCart = true,idHover = true" @mouseleave="showCart = false,idHover = false" :class="{ 'id-hover': idHover }" @click="turnRouter('/trolley2')">  
          <CartIcon />  
          <span style="margin-left: 5px;">购物车（{{ cartCount }}）</span>  
		  
        </a>  
        <div v-show="showCart" class="cart-content" @mouseover="showCart = true,idHover = true" @mouseleave="showCart = false,idHover = false" :class="{ 'id-hover': idHover }">
			<!--购物车为空-->
			<div class="empty" v-if="cartstatus === 0">
			<div class="emptycart">
				<emptyCartIcon></emptyCartIcon>	
			</div>
			<div class="emptycart-content">购物车中还没有商品，赶紧选购吧！</div>
			</div>
			<!--购物车有东西时-->
			<div class="full" v-if="cartstatus === 1">
					 <header class="head">最新加入的商品</header>
					 <main class="main">
						<div v-for="item in cartItems" :key="item.id" class="cart-item">
							
							<img :src="Path.imgPath + item.imgs" alt="Cart Item" style="width: 50px; height: 50px;">	
							 <div class="cart-item-text">{{ item.description }}</div> 
								<div class="p-num-delete">
									<div class ="p-num">
										<span class="item-price">￥{{item.price}}元</span>
									</div>
										<div class="delete"> 
											<button class="delete-button" style="border: none;background-color: white;" @click="deleteCart(item.id)">删除</button>
										</div>
								</div>
						</div>
					 </main>
					 <footer class="foot">
						 <div class="foot-text">共{{ cartCount }}件商品</div>
						 <button class="gocart-button" @click="turnRouter('/trolley2')">去购物车</button>
					 </footer>
			</div>
		</div>  
      </div>  
    </div>  

</template>  
  
<script setup>  
import { computed } from 'vue';
import { ref,onMounted,watch } from 'vue';  
import { Path } from '@/constant/index'
import VueCookies from "vue-cookies";
import { get,post } from '@/plugins/axios'
import CartIcon from '@/components/components-zjm/CartIcon';  
import emptyCartIcon from '@/components/components-zjm/emptycart';  
import router from '@/router'; 
import { useCartItemStore } from "@/stores/pinia"
import VueCookie from 'vue-cookies';
import { useUserStore } from '@/stores/pinia';
const userStore = useUserStore()
if( VueCookies.get("token" !== null)){
	userStore.setLoginUser()
	name.value.value = userStore.loginUser.nickName
}
let name = computed(() => { userStore.loginUser.nickName })
const CartItemsStore = useCartItemStore();
const showCart = ref(false);  
const leftArray = ref([
{name:'首页 |',url:'/'},
{name:'联系方式 |',url:'/contact'},
{name:'关于我们 ',url:'/aboutUs'}
]);  
const rightArray = ref([
{name:'|',url:''},
{name:'个人中心',url:'/personalCenter'}
]);  
const cartItems = ref([]);
getCart()
function getCart(){
	if(VueCookie.get("token") !== null){
			CartItemsStore.setSelectedGoods()
			cartItems.value = CartItemsStore.selectedGoods
	}
}

// 用来监听值的改变来刷新组件
onMounted(() => {  
  cartItems.value = CartItemsStore.selectedGoods;  
});  
  
watch(() => CartItemsStore.selectedGoods, (newVal, oldVal) => {  
  if (newVal !== oldVal) {  
    cartItems.value = newVal;  
  }  
});  

function deleteCart(id){
	post(Path.cartDeleteById,{
		cid: id
	},content => {
		getCart()
	})
}
const cartstatus = computed(() => cartItems.value.length === 0 ? 0 : 1);
const cartCount = computed(() => cartItems.value.length); 
const loginstatus=ref(false);
const turnRouter=(url)=>{
	router.push(url)
}
isLogin()
function isLogin(){
	if(VueCookies.get("token") !== null){
		loginstatus.value = true
	} else {
		loginstatus.value = false
	}
}
function esc(){
	document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
	// 将应用域中的数据清空
	localStorage.clear();
  router.push("/")
	location.reload()
}
</script>  
  
<style scoped lang="scss">  
a:hover{
	cursor: pointer;
}
.title {  
  height: 40px;  
  background-color: #333333;  
  min-width: 1226px;  
  display: flex;  
  justify-content: space-between;
  a {  
    color: #bfbfbf;  
    font-size: 0.90rem;  
    margin-right: 16px;  
  text-decoration: none;
    &:hover { 	 
      color: #ffffff;  
    }  
  }  
  
  .left{
	  display: flex;
	  align-items: center;
		margin-left: 100px;
	 
  }
   .right {  
	  
    display: flex;  
	margin-right: 50px;
    align-items: center;  
    a:nth-last-child(2) {  
      margin-right: 0;  
    }  
  
    .cart {  
      width: 200px;  
      display: flex;  
      background-color: #333333;  
      height: 100%;  
      align-items: center;  
      justify-content: center;  
  
    &:hover ,&.id-hover {
      color: #ff8810;  
      background-color:white; 
    		border: 0.1px solid #ececec;
    		border-bottom: none;
    }  
    }  
  }  
 
  .right {  
	  
    position: relative;  
   z-index: 2;
    .cart-content {  
      position: absolute;  
      top: 100%;
      width: 100%; 
	height: auto;
      background-color: #ffffff;
		border:0.1px solid #ececec;
		border-top: none;
      // box-shadow: 0 2px 5px #a8a8a8;  
      // padding-top: 15px;  
      // padding-left: 13px;  
      
      .empty {  
        display: flex;  
        justify-content: space-around;  
      
        .emptycart-content {  
          font-size: 12px;  
          width: 330px; /* 可能需要调整以适配内容 */  
          margin-top: 18px;  
          color: #8a8a8a;  
        }  
      } 
	   .full {
	   		.head{
				height: 40px;
				background-color: #f8f8f8;
				font-size: 15px;
				display: flex;
				padding-left: 10px;
				align-items: center;
				
			}
			.main{
				max-height: 300px;
				overflow-y: auto;
				padding-left: 15px;
				padding-top: 15px;
				.cart-item{
					
					display: flex;
					 border-bottom: 1px solid #949494;
					.cart-item-text{
						width: 45%;
						font-size: 13px;
					}
					.p-num-delete{
						margin-left: 30px;
						.p-num{
							font-size: 16px;
							color:#5b5b5b
						}
						.delete{
							margin-left: 56px;
							.delete-button{
								&:hover {  
								  color: #ff4108;  
								}  
							}
						}
					}
				}
				
			}
	   		.foot{
				height: 50px;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 20px;
				padding-right: 20px;
				.foot-text{
					font-size: 14px;
				}
				.gocart-button{
					border: none;
					background-color: red;
					width: 68px;
					height: 29px;
					border-radius: 5px;
					color: #f7f7f7;
				}
			}
				
	   }  
	  }
     
    }
  }  
 
</style>